<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>文化资讯</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css"
    rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->

  <link rel="stylesheet" href="css/main.min.css">

  <!-- /style -->

</head>

<body>
  <div class="page page-news">


    <section class="common_header_item">
      <header class="page__header" id="header"></header>
      <section class="section page__main_nav" id="pageNav"></section>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section">
        <img src="img/img_xian-PC/culture-feiyi.png" width="100%" alt="">
      </section>
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">文化资讯</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- / breadcrumb -->
      <!-- 分类 -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module-filter-wrapper">
              <div class="module module-filter">
                <h3 class="title"><i class="iconfont icon-activity-fill"></i>日

                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 期 :</h3>
                <div class="item data-choose">
                  <input id="date_start" type="date" value="2014-02-03">至
                  <input id="date_end" type="date" value="2022-02-03">
                </div>
              </div>
              <div class="module module-filter">
                <h3 class="title"><i class="iconfont icon-activity-fill"></i>资讯分类 :</h3>
                <div class="module-filter-list" id="category">
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 列表内容 -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module module__media_live media-list" id="list">
              <!-- 数据渲染 -->

            </div>
          </div>
        </div>
      </section>
      <nav class="page-pagination module-filter-page" aria-label="page-pagination" id="pages">

      </nav>
      <!-- / pagination -->
    </main>
    <!-- / container -->

    <footer class="page__footer">

    </footer>


    <!-- / footer -->

    <!-- / pendant -->
  </div>
  <!-- /page -->


  <script
    src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css"
    rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/js.cookie-2.20/js.cookie.js"></script>

  <!-- 通用组件 -->
  <script src="js/page-header.js"></script>
  <script src="js/page-footer.js"></script>

  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/hy.util.js"></script>

  <script src="js/app.js"></script>
  <script src="js/common.min.js"></script>

  <script src="js/common/gb2260.js"></script>
  <script src="js/common/hs-area.js"></script>
  <script src="js/common/clamp.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/util/page-helper.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- /script -->
  <script>
    $(document).ready(function () {
      // 1999-09-09 12:30/1999-09-09 12:30
      var params = {
        'catId': 100007,
        'order': 1,
        'activityState': null,
        // 'starDate': null,
        // 'endDate': null,
        'outputTime': null,
        'collectionId': null,
        'keywords': null,
        'pageSize': 5,//每页条数
        'pageNumber': 1,//页码
      };
      var pageParms = getPageParms();


      loadFinalHtml(loadHtml)
      function loadFinalHtml(endFunction) {
        $.get(urlPath + "api/category", {
          'pid': 100007
        }, function (data) {
          var categorys = data.data;
          var html = '';
          html += '<a class="item ' + (params.catId == 100007 ? 'active' : '') + '" data-filter="activity-channel-1" catID="100007" href="#">全部</a>';
          $(categorys).each((i, cate) => {
            html += '<a class="item  ' + (params.catId == cate.id ? 'active' : '') + '" data-filter="activity-channel-' + (i + 2) + '" catID="' + cate.id + '" href="#">' + cate.name + '</a>';
          })
          $("#category").html(html)
          if (typeof (endFunction) == 'function') {
            endFunction();
          }
        })
      }

      $('#date_start').change(function () {
        params.outputTime = $('#date_start').val() + "/" + $('#date_end').val()
        loadHtml();
      })
      $('#date_end').change(function () {
        params.outputTime = $('#date_start').val() + "/" + $('#date_end').val()
        loadHtml();
      })

      // 过滤标签没有加链接就阻止#跳转
      $('.module-filter-list').on('click', '.item', function (e) {
        var $this = $(this);
        catID = $this.attr("catID");
        params.catId = catID;
        loadFinalHtml(loadHtml)
        if ($this.attr('href') === "#") {
          e.preventDefault();
        }
      });

      function loadHtml() {
        commonAjax({
          url: "api/res/list",
          type: "POST"
        }, params, null, (data) => {
          page(pageParms, "pages", data);
          var list = data.data;
          var html = '';
          $(list).each((index, item) => {
            var time = item.pubTime.split(' ');
            html += '<a href="news-detail.html?pubId=' + item.pubId + '" target="_blank"' +
              ' class="media media__type_03 media-bg-white media-aside media-item-special-archive">' +
              '<div class="pure-u-1-6">' +
              '<div class="object">' +
              ' <img class="img-responsive" src="' + item.poster + '" width="234" alt="">' +
              '</div>' +
              ' </div>' +
              '<div class="pure-u-5-6 news-column-container">' +
              ' <div class="column-inner">' +
              '<div class="caption">' +
              '<div class="headline">' +
              '<div class="clamp-ellipsis">' +
              '<span>' + item.labels + '</span>' + item.title +
              '</div>' +
              '</div>' +
              '<div class="abstract">' +
              '<p class="content-text clamp-ellipsis">' +
              item.description +
              '</p>' +
              '</div>' +
              '<div class="attach">' +
              ' <span class="special-archive-arrow iconfont"></span>' +
              '<span class="special-archive-publish-time">' + time[0] + '<br>' + time[1] + '</span>' +
              '</div>' +
              '</div>' +
              '</div>' +
              '</div>' +
              '</a>';
          })
          $("#list").html(html);
          /*列表切换*/
          $('.j_itemVolunteer_click li').on('click', function (e) {
            e.preventDefault();
            //得到当前索引
            var i = $(this).index();
            $('.j_itemVolunteer_click li').removeClass('active').eq(i).addClass('active');
            volunteerSwiper.slideTo(i, 1000, false);
          });


          //多行文本显示省略号兼容问题
          var titles = $(".headline .clamp-ellipsis");
          var answers = $(".abstract .clamp-ellipsis");

          for (var i = 0; i < titles.length; i++) {
            $clamp(titles[i], {
              clamp: 1
            });
          }
          for (var i = 0; i < answers.length; i++) {

            $clamp(answers[i], {
              clamp: 3
            });
          }

        })
      }
      onPage("pages", pageParms, params, loadHtml);
    });
  </script>
</body>

</html>